<template>
    <div id="vheader" class="center">
      <div class="center" style="padding-left: 20px;width:70%;">
        <img class="horizontal" src="../assets/logo.png" style="height:60px;height:60px;"/>
        <h1 class="horizontal">XXXX系统</h1>
      </div>
      <div class="center" style="width:30%;justify-content: flex-end;">
        <img class="c-right" src="../assets/pic.jpg" style="height:30px;height:30px;padding-right: 5px;"/>
        <span class="c-right">王小虎</span>
        <span class="c-right">注销</span>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
  .c-right{
    padding-right: 20px;
  }
  .horizontal{
    float:left;
    display:inline;
  }
  .center{
    /*flex 布局*/
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    /*justify-content: center;*/
  }
  #vheader{
    width: 100%;
    height: 100%;
  }
  .el-header {

  }
</style>
